<template>
  <div>
    <div>
      <div class="card" v-for="(a, i) in arr" :key="i" :id="i">
        <div class="hd">
          <h1>连载榜</h1>
          <h2>作品三日内有更新，按周热度排行</h2>
        </div>
        <ol class="ranking-list" id="myol">
          <li
            @mouseenter.stop="enter($event)"
            @mouseleave.stop="leave($event)"
            v-for="(item, index) in items"
            :key="index"
            :class="{
              active: index % 10 == 0 ? true : false,
              item: index % 10 == 0 ? false : true,
            }"
            :id="i * items.length + index"
          >
            <div class="ranking-item-content">
              <div class="ranking-number">
                {{ item.cid }}
              </div>
              <div class="info">
                <h3 class="title">{{ item.name }}</h3>
                <div class="author">
                  {{ item.author }}
                </div>
                <div class="extra-info">
                  <a href="">{{ item.extra }}</a>
                </div>
              </div>
              <div class="shadow-cover">
                <router-link to="">
                  <img src="/zhd-img/lieyan.jpg" alt="" />
                </router-link>
              </div>
            </div>
          </li>
          <router-link to="">
            <button class="btn">查看详情</button>
          </router-link>
        </ol>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [1, 2, 3, 4, 5,6,7,8,9,10],
      items: [
        { cid: 1, name: "烈焰", author: "尼卡", extra: "言情" },
        { cid: 2, name: "龙婆", author: "蚕丝如故", extra: "悬疑" },
        { cid: 3, name: "一纸千金", author: "伊北", extra: "女性" },
        { cid: 4, name: "小山城", author: "包包鱼", extra: "女性" },
        { cid: 5, name: "云胡不喜", author: "尼卡", extra: "言情" },
        {
          cid: 6,
          name: "三胎我又又又生了个儿子",
          author: "边塞",
          extra: "女性",
        },
        { cid: 7, name: "试着做个兽系青年吧", author: "玫瑰", extra: "女性" },
        { cid: 8, name: "朝朝", author: "孟德的小公主", extra: "言情" },
        { cid: 9, name: "你钓过鲨鱼吗", author: "陆云云", extra: "言情" },
        { cid: 10, name: "春痕不欲", author: "芭蕉", extra: "言情" },
      ],
      thisSelect: 0,
      mark: false,
    };
  },
  methods: {
    enter(e) {
      //   this.shows = index;
      if (e.target.id % 10 != 0) {
        console.log(e.target.id);
          e.target.className = "active";
          let now = document.getElementById(e.target.id);
          now.parentElement.firstElementChild.className=('item');
          
           
      }else{
          
          e.target.className = "active"; 
      }
    },
    leave(e) {
      if (e.target.id %10 != 0) {
        e.target.className = "item";
        let now = document.getElementById(e.target.id);
        let first = now.parentElement.firstElementChild;
        first.className = "active";
      }else{
        e.target.className = "active"
        }
    },
  },
  computed: {},
};
</script>
<style scoped>
.card {
  background-color: #fff;
  width: 288px;
  height: 635px;
  margin: 0 8px 40px;
  float: left;
}
.card > .hd {
  width: 288px;
  height: 100px;
  padding: 20px;
  box-sizing: border-box;
}
.hd h1 {
  height: 20px;
  font-size: 18px;
  color: #bb996d;
}
.hd h2 {
  height: 18px;
  font-size: 12px;
  line-height: 1;
  margin: 2px 0 0;
  color: #a6a6a6;
  font-weight: normal;
  margin-top: 3px;
}
ol {
  list-style: none;
}
li {
  padding: 10px 20px;
  width: 288px;
  box-sizing: border-box;
}
.ranking-item-content {
  display: flex;
  justify-content: left;
}
.active  {
  display: flex;
  justify-content: left;
}
.active .info > .title {
  display: block;
  width: 143px;
  height: 18px;
  font-size: 14px;
  margin: 0 0 2px;
  font-weight: normal;
  color: #333;
}
.active .info > .author {
  display: block;
  width: 143px;
  height: 18px;
  font-size: 12px;
  line-height: 18px;
  color: grey;
  margin-bottom: 12px;
}
.active .info > .extra-info {
  display: block;
}
.active .info > .extra-info a {
  width: 143px;
  height: 18px;
  font-size: 12px;
  line-height: 18px;
  color: grey;
  display: inline-block;
}
.active .shadow-cover img {
  display: block;
  width: 80px;
  height: 120px;
}
.ranking-number {
  width: 20px;
  height: 19px;
  color: red;
  font-size: 14px;
  line-height: 19px;
  font-weight: bold;
}
.item .title {
  width: 200px;
  height: 18px;
  font-size: 14px;
  margin: 0 0 2px;
  font-weight: normal;
  color: #333;
}
.item .author {
  width: 143px;
  height: 18px;
  font-size: 12px;
  line-height: 18px;
  color: grey;
  margin-bottom: 12px;
  display: none;
}
.item .extra-info a {
  width: 143px;
  height: 18px;
  font-size: 12px;
  line-height: 18px;
  color: grey;
  display: inline-block;
}
.item .extra-info {
  display: none;
}
.item .shadow-cover img {
  width: 80px;
  height: 120px;
  display: none;
}
.btn {
  width: 288px;
  height: 43px;
  padding: 15px 0;
  box-sizing: border-box;
  color: #389eac;
  font-size: 12px;
  font-weight: normal;
  background-color: white;
}
.btn:hover {
  background-color: #eff2f3;
}
</style>